<template>
	<view class="m-2">
		<view class="bg-white p-2">
			<view class="d-flex flex-row flex-nowrap j-sb" style="width:670upx;height:80upx;line-height:80upx;border-bottom:2px solid #2878ff;font-size:30upx;">
				<view class="d-flex flex-row" style="width:180upx;line-height: 80upx;" @click="favorite">
					<image :src=" favoriteFlag == '1' ? '../../static/icon/favorite02.png' : '../../static/icon/favorite01.png' " style="width:40upx;height: 40upx;margin-top:15upx;margin-left:20upx;margin-right:10upx;"></image>
					<text>收藏</text>
				</view>
				<view  class="d-flex flex-row flex-nowrap" style="width: 220upx;text-align: center;line-height: 80upx;">
					<view style="color:#007e00;width:120upx;">答对</view>
					<view style="width: 80upx;color: #55a9ee;font-weight: bold;">{{ rightNum }}</view>
					<view style="color:#FF0000;width:120upx;">答错</view>
					<view style="width: 80upx;color: #e75e51;font-weight: bold;">{{ wrongNum }}</view>
				</view>
				<view class="d-flex flex-row flex-nowrap j-end" style="width:200upx;padding-right:20upx;" @click="showAnswerCard">
					<text style="font-weight: bold;">{{currentIndex+1}}</text>/<text>{{ questionList.length }}</text>
					<image src="../../static/icon/abcd.png" style="width:30upx;height: 30upx;margin-top:25upx;margin-left:10upx;"></image>
				</view>
			</view>
			
			<swiper class="swiper" style="height: 1000upx;" :current="currentIndex" @change="questionChange" >
				<swiper-item v-for="(item,index) in questionList" :key="'q' + item.id">
					<scroll-view scroll-y="true" style="height: 1000upx;">
						<view style="width:670upx;font-size:32upx;">
							<!-- 选择题 -->
							<view >
								<view class="mt-2">
									<view style="font-weight: bold;">
										<text v-if="item.questionType == '1'">单选题</text>
										<text v-if="item.questionType == '2'">多选题</text>
										<text v-if="item.questionType == '3'">判断题</text>
										<text v-if="item.questionType == '4'">案例题</text>
									</view>
									
									<rich-text v-html="item.title" ></rich-text>
								</view>
								<view class="mt-2">
									<rich-text v-html="item.title" ></rich-text>
								</view>
								<view v-for="(sitem,sindex) in item.questionOptions" :key="sitem.id" class="d-flex flex-row flex-wrap mt-2 option_con"
									:style=" 'background-color:' + ( (currentOptionId && currentOptionId.indexOf(sitem.id) != -1) ? '#019ef8' : '#f2f2f2') + ';color:' + ( (currentOptionId && currentOptionId.indexOf(sitem.id) != -1) ? '#ffffff' : '#000000')+ ';'"
									@click="selectOption(item.id, sitem.id)" >
									<view class="option_no">
										<text>{{ sitem.letter }}</text>
									</view>
									<view class="d-flex flex-row flex-wrap py-1 pr-1" style="width:590upx;">
										<rich-text v-html="sitem.optionContent" ></rich-text>
									</view>
								</view>
								
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			
			
			<view class="d-flex flex-row flex-nowrap j-sb mt-1">
				<view class="w-30 pr-2" style="line-height: 80upx;">
					<text v-if="!isRight">请回答</text>
					<text v-if="isRight == '1'" style="font-weight: bold;color: #007e00;">回答正确</text>
					<text v-if="isRight == '0'" style="font-weight: bold;color: #ff0000;">回答错误</text>
				</view>
				<view class="w-30 pl-2">
					<button class="view_btn" @click="showAnalysis" >{{ this.showAnswerAnslysis ? "隐藏" : "查看" }}答案</button>
				</view>
				<view class="w-30 pl-2" >
					<button class="clear_btn" @click="showRemoveError" >删除</button>
				</view>
			</view>
			
			<view class="mt-2" v-show="showAnswerAnslysis">
				<view style="color: #007e00;font-weight: bold;">
					标准答案： {{ standardAnswer }}
				</view>
				<view>
					解析： {{ analysis }}
				</view>
			</view>
			
			<view class="d-flex flex-row flex-nowrap j-sb mt-2">
				<view class="w-50 pr-2">
					<button :class="this.currentIndex > 0 ? 'pre_next_enable_btn' : 'pre_next_disabled_btn' "   @click="preview">上一题</button>
				</view>
				<view class="w-50 pl-2">
					<button :class=" this.currentIndex < this.questionList.length - 1 ? 'pre_next_enable_btn' : 'pre_next_disabled_btn' "  @click="next">下一题</button>
				</view>
			</view>			
		</view>
		
		<shuati_card v-show="showCard" style="width:670upx;position: absolute; top:120upx;left:40upx;" :answerList = "answerList" 
			:currentIndex="currentIndex" :chapterName="chapterName"  @selectEvent="handleSelect"  ></shuati_card>
		
		<uni-popup ref="removeConfirm" type="dialog">
			<uni-popup-dialog type="error" cancelText="取消" confirmText="确认" title="提醒" content="确认将该题移出错题集" 
			@confirm="removeConfirm" @close="removeCancel"></uni-popup-dialog>
		</uni-popup>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 显示答题卡
				showCard: false,
				// 提交标识（提交后又回退到考试页面跳转首页）
				submitFlag: "0",
				// 当前正在进行的专题id
				chapterId: '',
				chapterName: '城市客运安全生产法律法规,规章制度和标准规范',
				// 考生ID
				staffId: '',
				questionList: [],
				// 当前试题编号索引
				currentIndex: 0,
				// 答题卡
				answerList: [],
				// 选中的答案
				currentOptionId: '',
				
				// 答对数量
				rightNum: 0,
				// 错题数量
				wrongNum: 0,
				// 题目总数
				
				// 标题答案和解析
				showAnswerAnslysis: false,
				isRight: '',
				standardAnswer: '',
				analysis: '',
				
				// 当前试题是否收藏
				favoriteFlag: '0',
				
				// 最后答题序号
				endIndex: 0,
			}
		},
		
		onShow() {
			// 如果已经提交试卷，跳转首页
			if(this.submitFlag == "1"){
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		},
		
		onLoad(option) {
			this.chapterId = option.chapterId
			this.getShuatiData()
		},
		
		onReady() {
		    document.body.style.overflow = 'auto';
		    document.documentElement.style.overflow = 'auto';
		},
		
		methods: {
			
			// 查询刷题列表
			getShuatiData(){
				let url = '/shuati/getShuatiErrorQuestion'
				
				let apply = uni.getStorageSync("staff_apply")
				let param = {chapterId: this.chapterId, examType: apply.examType}
				this.$H.post(url, param, {token: true}).then(res=>{					
					if(!res || res.code != 200){
						return uni.showToast({
							title: '获取数据失败'
						})
					}
					uni.hideLoading()
					this.questionList = res.result.questionList
					this.answerList = res.result.answerList
					this.staffId = res.result.staffId
					
					this.chapterId = res.result.chapterId
					this.chapterName = res.result.chapterName
					
					// 处理当前进行到第几题
					this.endIndex = res.result.endIndex
					// 处理答对、答错题数
					this.rightNum = res.result.rightNum
					this.wrongNum = res.result.wrongNum
					
					// 直接跳转到上次刷题的进度
					this.currentIndex = (this.endIndex && this.endIndex < this.questionList.length - 1) ? this.endIndex : 0
					
					// 初始化当前试题的收藏
					let currentAnswer = this.answerList[this.currentIndex]
					this.favoriteFlag = currentAnswer.favoriteFlag
					
					// 当前试题的答案显示
					this.currentOptionId = currentAnswer.staffAnswerId
					
					this.isRight = currentAnswer.isRight
					
				}).catch( err =>{
					if(err.msg){
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
					uni.hideLoading()
				})
			},
			// 选择答案
			selectOption(questionId, optionId){
				let question = this.questionList.filter(item=> item.id == questionId)[0]
				let option = question.questionOptions.filter(sitem => sitem.id == optionId)[0]
				let currentAnswer = this.answerList[this.currentIndex]
				
				// 试题类型 1 单选 2 多选  3 判断  4 案例
				let questionType = question.questionType
				let isRight = null
				let staffAnswerId = null
				let staffAnswer = null
				let currentOptionId = null
				// 修改答题卡答对、答错颜色
				if(questionType == '1' || questionType == '3'){
					// 修改答题卡答对、答错颜色
					isRight = question.standardAnswer == option.letter ? "1" : "0"
					staffAnswerId = optionId
					staffAnswer = option.letter
					currentOptionId = optionId
				}else if(questionType == '2' || questionType == '4'){
					// 原始答案
					let oldAnswer = currentAnswer.staffAnswer
					let oldAnswerId = currentAnswer.staffAnswerId
					
					let oldAnswerArr = oldAnswer ? oldAnswer.split(',') : []
					let oldAnswerIdArr = oldAnswerId ? oldAnswerId.split(','):[]
					
					if(oldAnswerId && oldAnswerId.indexOf(optionId) != -1){
						// 清除已选选项
						oldAnswerArr = oldAnswerArr.filter(item => item != option.letter)
						oldAnswerIdArr = oldAnswerIdArr.filter(item => item != optionId)
					}else if(!oldAnswerId || oldAnswerId.indexOf(optionId) == -1){
						// 添加未选中的选项
						oldAnswerIdArr.push(optionId)
						oldAnswerArr.push(option.letter)
					}
					
					staffAnswerId = oldAnswerIdArr.join(',')
					oldAnswerArr.sort()
					staffAnswer = oldAnswerArr.join(',')
					currentOptionId = oldAnswerIdArr.join(',')
					// 完全匹配算正确
					isRight = (question.standardAnswer == oldAnswerArr.join(',')) ? "1" : "0"
					
				}
				
				this.isRight = isRight
				if(isRight == '0'){
					// 答错题，直接显示参考答案
					this.showAnswerAnslysis = true
				}
				this.currentOptionId = currentOptionId
				
				let url = '/shuati/answerQuestion'
				let param = {
					staffId: this.staffId,
					chapterId: this.chapterId, 
					questionId: questionId, 
					optionId: optionId, 
					staffAnswer: staffAnswer,
					staffAnswerId: staffAnswerId,
					standardAnswer: question.standardAnswer,
					isRight: isRight,
					endIndex: this.currentIndex,
					shuatiType: '2',
				}
				this.$H.post(url, param, {token: true}).then(res=>{					
					if(!res || res.code != 200){
						return uni.showToast({
							title: '操作异常',
							icon: 'none'
						})
					}
					
					// 初始化后台返回的答对、答错数量
					this.rightNum = res.result.rightNum
					this.wrongNum = res.result.wrongNum
					
					// 修改答题卡答对、答错颜色
					let currentAnswer = this.answerList[this.currentIndex]
					currentAnswer.isRight = isRight
					currentAnswer.staffAnswer = staffAnswer,
					currentAnswer.staffAnswerId = staffAnswerId,
					currentAnswer.shuatiType = '2'
					
					// this.currentOptionId = currentOptionId
				}).catch( err =>{
					if(err.msg){
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
				})
				
			},
			// 试题切换
			questionChange(event){
				this.currentIndex = event.detail.current
				this.statusSwip()
			},
			// 定位试题
			handleSelect(param){
				let questionId = param.questionId
				let index = param.index
				
				// 定位到试题
				this.currentIndex = index
				
				this.statusSwip()
				
				// 切换试题后隐藏答题卡
				this.showCard = false
			},
			
			showAnswerCard(){
				this.showCard = !this.showCard
			},
			
			// 显示试题解析
			showAnalysis(){
				let question = this.questionList[this.currentIndex]
				if(question.standardAnswer){
					this.standardAnswer = question.standardAnswer.replaceAll(',','')
				}
				this.analysis = question.analysis
				this.showAnswerAnslysis = !this.showAnswerAnslysis
			},
			
			// 下一题
			next(){
				if(this.currentIndex < this.questionList.length - 1){
					++this.currentIndex;
					this.statusSwip()
				}
			},
			// 上一题
			preview(){
				if(this.currentIndex > 0){
					--this.currentIndex
					this.statusSwip()
				}
			},
			
			// 切换试题数据状态变更 
			statusSwip(){
				// 收藏状态
				let currentAnswer = this.answerList[this.currentIndex]
				console.log('statusSwip currentAnswer:' + JSON.stringify(currentAnswer))
				
				let staffAnswerId = currentAnswer.staffAnswerId
				if(staffAnswerId){
					this.currentOptionId = staffAnswerId
				}
				
				this.isRight = currentAnswer.isRight
				
				this.favoriteFlag = currentAnswer.favoriteFlag
				// 隐藏解析
				this.showAnswerAnslysis = false
				let question = this.questionList[this.currentIndex]
				this.analysis = question.analysis
				
			},
			
			// 收藏或取消收藏
			favorite(){
				let currentAnswer = this.answerList[this.currentIndex]
				let question = this.questionList[this.currentIndex]
				currentAnswer.favoriteFlag = currentAnswer.favoriteFlag == "1" ? "0" : "1"
				this.favoriteFlag = currentAnswer.favoriteFlag
				let url = currentAnswer.favoriteFlag == "0" ? "/shuati/unfavorite": "/shuati/favorite"
				let param = {
					staffId: this.staffId,
					chapterId: this.chapterId, 
					questionId: question.id,
					shuatiType: '2',
				}
				this.$H.post(url, param, {token: true}).then(res=>{					
					if(!res || res.code != 200){
						return uni.showToast({
							title: '操作失败',
							icon: 'none'
						})
					}
					uni.hideLoading()
				}).catch( err =>{
					if(err.msg){
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
					uni.hideLoading()
				})
				
			},
			
			showRemoveError(){
				this.$refs.removeConfirm.open()
			},
			
			removeCancel(){
				
			},
			
			// 删除错题
			removeConfirm(){
				let url = '/shuati/removeErrQuestion'
				let question = this.questionList[this.currentIndex]
				console.log('question:' + JSON.stringify(question))
				let param = {
					staffId: this.staffId,
					chapterId: this.chapterId,
					questionId: question.id
				}
				this.$H.post(url, param, {token: true}).then(res=>{
					
					if(res){
						uni.showToast({
							title: '删除成功',
							icon: "none"
						})
					}
					setTimeout(()=>{
						uni.navigateTo({
							url: "/pages/cuoti/shuacuoti?chapterId=" + this.chapterId
						})
					},500)
				}).catch( err =>{
					if(err.msg){
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
				})
			}
			
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: #f1f1f1;
	}
	
	.option_con{
		background-color: #f2f2f2;
	}
	
	.option_con_selected{
		background-color: #c5dcf2;
	}
	
	.option_no{
		width:50upx;margin-left:20upx;padding-top:10upx;
	}
	
	.pre_next_enable_btn{
		height:70upx;line-height: 70upx; border-radius: 35upx;font-size:28upx;background-color: #2878ff; color:#ffffff;
	}
	
	.pre_next_disabled_btn{
		height:70upx;line-height: 70upx; border-radius: 35upx;font-size:28upx;background-color: #d6d6d6;
	}
	
	.view_btn{
		height:70upx;line-height: 70upx; border-radius:35upx;color:#ffffff;background-color: #2878ff;font-size:28upx;
		width: 240upx; 
	}
	
	.clear_btn{
		height:70upx;line-height: 70upx; border-radius:35upx;color:#ffffff;background-color: #a3a3a3;font-size:28upx;
		width: 140upx; margin-left:60upx;
	}
	
</style>
